<template>
    <!-- highlightCurrenRow 在此组件无效  测试el-table 单独使用时可以有highlightCurrenRow效果 2022年10月24日 -->
    <!-- stripe 内部写死 :stripe="stripe" 会有失效的情况   -->
    <el-table :data="tableData" :height="height" @click.stop :stripe="true" :highlight-current-row="true"
        ref="childrenRef" @selection-change="handleSelectionChange" @row-contextmenu="rightClick"
        @row-click="rowLeftClick">
        <el-table-column v-if="selectionColumn" type="selection" width="45" />

        <el-table-column v-for="(item, index) in fieldList" :key="index" :label="item.label" header-align="center"
            :min-width="item.type == 'SLOT' ? slotMinWidth : item.type == 'LONGTEXT' ? longTextMinWidth:normalMinWidth">
            <!-- <template v-if="index < maxColumnCount" #default="scope"> -->
            <template #default="scope">

                <!-- 长文本 -->
                <div style=" display: flex; align-items: center;justify-content;: center"
                    v-if="item.type == 'LONGTEXT'">
                    <span>{{ scope.row[item.name] }}</span>
                </div>

                <!-- 时间 -->
                <div style=" display: flex; align-items: center;justify-content: center"
                    v-else-if="item.type == 'TIME'">
                    <span>{{ toTime(scope.row[item.name]) }}</span>
                </div>

                <!-- 日期 -->
                <div style=" display: flex; align-items: center;justify-content: center"
                    v-else-if="item.type == 'DATE'">
                    <span>{{ toDate(scope.row[item.name]) }}</span>
                </div>

                <!-- 日期时间 -->
                <div style=" display: flex; align-items: center;justify-content: center"
                    v-else-if="item.type == 'DATETIME'">
                    <span>{{ toDatetime(scope.row[item.name]) }}</span>
                </div>

                <!-- 图片 -->
                <div style=" display: flex; align-items: center;justify-content: center"
                    v-else-if="item.type == 'IMAGE'">
                    <el-image style="width: 50px; height: 50px" :src="toUrl(scope.row[item.name])"
                        :preview-src-list="toUrls(scope.row[item.name])" fit="cover" :preview-teleported="true" />
                </div>

                <!-- 插槽 -->
                <slot :name="item.name" :row="scope.row" v-else-if="item.type == 'SLOT'">
                </slot>

                <!-- 短文本 -->
                <div style=" display: flex; align-items: center;justify-content: center"
                    v-else-if="item.type == 'TEXT'">
                    <span>{{ scope.row[item.name] }}</span>
                </div>

            </template>
        </el-table-column>

    </el-table>

    <div id="menu" class="menuDiv">
        <ul class="menuUl">
            <li @click.stop="editRow()">
                <i class="bi bi-pen"></i> 编辑
            </li>
            <li @click.stop="deleteConfirmVisible = true">
                <i class="bi bi-trash"></i> 删除
            </li>
        </ul>
    </div>

    <el-dialog v-model="deleteConfirmVisible" title="删除当前行" center width="400px">
        <span>确定删除当前行数据？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteConfirmVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteRow()">
          确定
        </el-button>
      </span>
    </template>
        </el-dialog>



</template>
    
<script setup lang='ts' >

import { getCurrentInstance, inject, onMounted, reactive, ref, toRaw } from 'vue'
import { useConvert } from '@/hook/useConvert'
import * as _ from "lodash"
import { Table } from 'element-plus';
import { number } from 'echarts';

const { toDate, toDatetime, toTime, toUrls, toUrl } = useConvert()


interface TableField {
    name: string,
    label: string,
    type: 'TIME' | 'DATETIME' | 'DATE' | 'TEXT' | 'IMAGE' | 'LONGTEXT' | 'SLOT'
}

const props = defineProps({

    tableData: {
        type: Object,
        default: () => ([])
    },
    fieldList: {
        type: Object,
        default: () => ([])
    },
    height: {
        type: [Number, String],
        default: 300
    },

    //重写斑马纹默认值
    stripe: {
        type: Boolean,
        defalut: true
    },

    //重写点击行，高亮默认值 : 无用
    //  测试 直接使用el-table 在页面上 此值有用， 
    // 但是在调用组件的情况下，即使在组件内部直接 写 highlightCurrenRow（highlight-curren-row） 也无用
    highlightCurrenRow: {
        type: Boolean,
        defalute: true
    },

    //重写文本过长隐藏 : 无用
    // 测试时，加上此字段，即使是空的字符串，也会出现 tooltip
    showOverflowTooltip: {
        type: Boolean,
        defalute: true
    },

    //是否需要选择列
    // 搭配selectionColumnChange使用，此方法的第二个参数为ids 可以更快的进行删除操作
    selectionColumn: {
        type: Boolean,
        defalute: false
    },

    //更改插槽最小宽度 ，一般一个列只有一个插槽 按钮过多的话，可以尝试写宽一点
    slotMinWidth: {
        type: String,
        default: "120px"
    },


    normalMinWidth: {
        type: String,
        default: "80px"
    },


    longTextMinWidth: {
        type:String,
        default:"300px"
    },

    /**
     * 右键菜单补偿值
     */
    rightClickMenuLeftNumber: {
        type: Number,
        default: 0
    },

    /**
     * 右键菜单补偿值
     */
    rightClickMenuTopNumber: {
        type: Number,
        default: 0
    }



})



//获取当前选中列的方法
const emits = defineEmits(["selectionColumnChange","editRow","deleteRow"])
const handleSelectionChange = (vals: any[]) => {
    let ids: Array<String> = [];

    for (let val of vals) {
        if (val.id != undefined) {
            ids.push(val.id)
        }
    }
    emits("selectionColumnChange", vals, ids)
}



onMounted(() => {


    // tableData2ImagesUrl(props.fieldList, props.tableData)
})



/**
 * 记录此时右键点击的行
 */
const currentRow = ref()
const rightClick = (row: any, column: any, event: any) => {

    console.log("rightClick", row, column)
    currentRow.value = row;

    event.preventDefault();
    let menu = document.querySelector("#menu") as HTMLElement;
    // 根据事件对象中鼠标点击的位置，进行定位

    console.log("event", event);

    menu.style.left = event.clientX - props.rightClickMenuLeftNumber + "px";
    menu.style.top = event.clientY - props.rightClickMenuTopNumber + "px";
    // 改变自定义菜单的隐藏与显示
    menu.style.display = "block";
    menu.style.zIndex = "1000";
}


const editRow = () => {
    emits("editRow",currentRow);
    let menu = document.querySelector("#menu") as HTMLElement;
    menu.style.display = "none";
}

const deleteConfirmVisible = ref(false)
const deleteRow = () => {
    emits("deleteRow",currentRow);
    let menu = document.querySelector("#menu") as HTMLElement;
    menu.style.display = "none";
    deleteConfirmVisible.value = false
}

const rowLeftClick = (row: any, column: any, event: any) => {
    let menu = document.querySelector("#menu") as HTMLElement;
    menu.style.display = "none";
}

// const closeMenu = () => {

//     setTimeout(()=> {
//         let menu = document.querySelector("#menu") as HTMLElement;
//         menu.style.display = "none";
//     },5000)

// }

// defineExpose({
//     closeMenu
// })


</script>
    
<style scoped lang="scss">

:deep().el-table__inner-wrapper {
    height: 100% !important;
}
.menuDiv {
    display: none;
    position: absolute;

    .menuUl {
        height: auto;
        width: auto;
        font-size: 14px;
        text-align: left;
        border-radius: 4px;
        border: none;
        background-color: #ffffff;
        color: #606266;
        list-style: none;
        border: 1px solid #ebeef5;
        padding-left: 1rem;
        li {
            width: 140px;
            height: 35px;
            line-height: 35px;
            padding: 0px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255, 255, 255, 0.47);

            &:hover {
                display: block;
                background-color: #ecf5ff;
                color: #7abbff;
            }
        }
    }
}
</style>